<template>
  <div>
    <van-nav-bar
      title="会员登录"
      left-text=""
      right-text=""
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <div class="box">
      <div class="top">
        <p>手机号登录</p>
        <i>未注册的手机号将自动登录</i>
      </div>
      <div class="mid">
        <input v-model="mobile" type="text" placeholder="请输入手机号码" />
        <input v-model="PicCode" type="text" placeholder="请输入图形验证码" />
        <input v-model="MsgCode" type="text" placeholder="请输入短信验证码" />
        <a href="javascript:;0" class="YzImg">
          <!-- 给图片添加链接，点击的时候从后台获取验证码的图片 -->
          <img :src="this.PicUrl" alt="" @click="GetPicCode" />
        </a>
        <a href="javascript:;0" class="GetYan" @click="getCode" >{{ second === totalSecond ? '获取验证码' : second +'秒后重新发送'}}</a>
      </div>
      <div class="btom">
        <button class="loginbtn" @click="Login">
          登录
        </button>
      </div>
      <div class="warning">
        <span>初始短信验证码为：246810</span>
        <br>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import { GetPicCode, GetMsgCode, GetLogin} from '@/api/login'
export default {
  name: "LogIndex",
  data()
  {
    return{
      mobile: '',
      PicCode: '', //图片验证码
      MsgCode: '', //短信验证码
      PicUrl: '',
      PicKey: '',  //图形验证码 key
      CheckMsgCode: '',
      UserId:'',
      UserToken:'',
      // 倒计时
      second: 60, //现在的倒计时
      totalSecond: 60,  //总的倒计时
      timer: null,
    }
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    onClickRight() {
      Toast("按钮");
    },

    // 获取图形验证码
    async GetPicCode(){
      const res = await GetPicCode()
      this.PicUrl = res.data.base64
      this.PicKey = res.data.key
      this.$toast('获取图片验证码成功')
    },

    // 验证 手机号 &&& 图片4位验证码
    validFn () {
      if(!/^1[3456789]\d{9}$/.test(this.mobile))
      {
        this.$toast('请输入正确的手机号')
        return false
      }
      if(!/^\w{4}$/.test(this.PicCode))
      {
        this.$toast('请输入正确的图形验证码')
        return false
      }
      return true
    },
    // 倒计时
    async getCode(){
      // 如果验证通过 true 取反->就不执行return
      // 如果验证通过 false 取反->就执行return
      if( !this.validFn())
      {
        return
      }
      if(!this.timer && this.second === this.totalSecond)
    {
      var res =  await GetMsgCode(this.PicCode, this.PicKey , this.mobile)
      console.log(res);
      res = res.message.match(/\d+/g).join()
      this.CheckMsgCode = res
      this.$toast('验证码发送成功')
      this.timer =setInterval(()=>{
        this.second--
        if(this.second <= 0)
        { 
          clearInterval(this.timer)
          this.timer = null
          this.second = this.totalSecond
        }
      },1000)
    }
    },

    // 登录按钮
    async Login()
    {
      if(!this.validFn())
      {
        return
      }
      if(!/^\d{6}$/.test(this.MsgCode))
      {
        this.$toast('请检查输入的验证码') 
        return
      }
      var res =  await GetLogin( this.mobile, this.MsgCode)
      console.log(res);
      this.UserToken = res.data.token
      this.UserId = res.data.userId
      this.$store.commit('user/setUserInfo', res.data)
      this.$toast('登录成功') 
      const url = this.$route.query.backUrl || "/";
      this.$router.replace(url);
    }
  },
  mounted(){
    this.GetPicCode()
  },
  destroyed(){
    clearInterval(this.timer)
  }
};
</script>

<style lang='less' scoped>

.warning{
  width: 100%;
  height: 50px;
  text-align: center;
  line-height: 50px;
  margin: 100px auto;
  font-size: 25px;
  color: red;
}
.box {
  padding: 56px 12px;
}
.top {
  margin-bottom: 30px;
  p {
    font-size: 33px;
    color: black;
  }
  i {
    font-size: 16px;
    color: #cdcdcd;
  }
}

.mid {
  position: relative;
  input {
    width: 335px;
    height: 58px;
    border-bottom: 1px solid #cdcdcd;
    line-height: 58px;
  }
  .YzImg {
    position: absolute;
    display: inline-block;
    width: 100px;
    height: 40px;
    top: 18.4vw;
    right: 6.64445vw;
    img {
      width: 100px;
      height: 40px;
    }
  }
  .GetYan{
    position: absolute;
    color: #ff9f19;
    top: 37.4vw;
    right: 10.64445vw;
  } 
  margin-bottom: 39px;
}

.btom{
  position: relative;
  .loginbtn{
      position: absolute;
      left: 50%;
      margin-left: -162px;
      color: white;
      font-size: 19px;
      width:324px;
      height: 45px;
      border-radius: 20px;
      text-align: center;
      line-height: 45px;
      background-color:#f7ad2c;
  }
}

</style>